import React, { Component, useRef } from 'react';

import { Carousel } from 'antd';
import request from "../../api"
// import { Swiper, SpinLoading } from "antd-mobile";


interface Props {

}

interface State {
    swiperdata: SwiperItem[]
}
interface SwiperItem {
    img: string,
    link: string

}

const contentStyle: React.CSSProperties = {
    width: "100%",
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
class Swiper extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            swiperdata: []
        }
    }

    componentDidMount(): void {
        request.swiper.swiperlist().then((ok) => {
            if (ok.data.data!=null) {
                this.setState({ swiperdata: ok.data.data }, () => {
                    console.log(this.state.swiperdata);
                })
            }
        }).catch(() => {})
    }

    render() {
        return (
            <div className='swiper'>

                <Carousel autoplay>
                    {
                        this.state.swiperdata.map((item, index) => {
                            return (
                                <div key={index}>
                                    {/* <h3 style={contentStyle}>1</h3> */}
                                    <img style={contentStyle} src={item.img} alt="" />
                                </div>
                            )
                        })
                    }
                </Carousel>

                <Carousel autoplay style={{display:this.state.swiperdata.length==0?"":"none"}}>
                    <div>
                        <h3 style={contentStyle}>暂无图片</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>暂无图片</h3>
                    </div>
           
                </Carousel>
            </div>

            // 空数据

        );
    }
}

export default Swiper;